import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Index from '../views/Index.vue'

import axios from "../axios";
import store from "../store"
import el from "element-ui/src/locale/lang/el";

Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '',
        redirect: '/index'  // 重定向到首页
      },
      {
        path: '/index',
        name: 'Index',
        meta: {
          title: "首页"
        },
        component: () => import('@/views/Index.vue')
      },
      {
        path: '/TestManagement/BeSampleUnitsActivities',
        name: 'BeSampleUnitsActivities',
        meta: {
          title: "活动详情"
        },
        component: () => import('@/views/TestManagement/BeSampleUnitsActivities.vue')
      }
      // {
      //   path: '/sys/userinfo',
      //   name: 'UserInfo',
      //   meta: {
      //     title: "个人信息"
      //   },
      //   component: () => import('@/views/PersonCenter/SysUserInfo.vue')
      // },
      // {
      //   path: '/sys/changepwd',
      //   name: 'ChangePwd',
      //   meta: {
      //     title: "修改密码"
      //   },
      //   component: () => import('@/views/sys/SysChangePwd.vue')
      // },
      // {
      //   path: '/sys/needtestman',
      //   name: 'NeedtestMan',
      //   meta: {
      //     title: "需检人员信息"
      //   },
      //   component: () => import('@/views/sys/SysNeedtestMan.vue')
      // },
      // {
      //   path: '/sys/activitymanage',
      //   name: 'ActivityManage',
      //   meta: {
      //     title: "活动管理"
      //   },
      //   component: () => import('@/views/sys/SysActivityManage.vue')
      // },
      // {
      //   path: '/sys/addressmanage',
      //   name: 'AddressManage',
      //   meta: {
      //     title: "地点管理"
      //   },
      //   component: () => import('@/views/sys/SysAddressManage.vue')
      // },
      // {
      //   path: '/sys/notesmanage',
      //   name: 'NotesManage',
      //   meta: {
      //     title: "记录管理"
      //   },
      //   component: () => import('@/views/sys/SysNotesManage.vue')
      // },
      // {
      //   path: '/sys/authinfo',
      //   name: 'AuthInfo',
      //   meta: {
      //     title: "权限信息"
      //   },
      //   component: () => import('@/views/sys/SysAuthInfo.vue')
      // },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
]

const router = new VueRouter({
  mode: 'history',  // 使用history模式时，url就像正常的url
  base: process.env.BASE_URL, // 所有的请求都会在url之后加上process.env.BASE_URL
  routes
})

// 路由拦截，控制路由的重定向（to: 即将要进入的路由对象；from：当前导航正要离开的路由）
router.beforeEach((to, from, next) => {
  // vuex中state的值，在刷新后重进，或打开浏览器刚进该网站，或退出后重新登录，都会恢复为默认值
  // 因此在出现上述情况后，hasRoute将恢复为false
  let hasRoute = store.state.menus.hasRoutes

  let token = localStorage.getItem("token")

  if (to.path == '/login') {
    next()  // 放行，进入想去的页面（这里想去的就是login页面）
  } else if (!token) {
    next({ path: '/login' })  // 无token，不放行，强制进去login页面

  } else if (token && !hasRoute) {  // 添加路由那段代码有点问题，路由配置会重复，后续记得该
    axios.get("/gmu/tbl-menu/getMenusByAdminId", {
      headers: {
        token: localStorage.getItem("token")
      }
    }).then(res => {

      console.log('res.data.data:', res.data.data)

      // 拿到menuList
      store.commit("setMenuList", res.data.data)

      console.log(store.state.menus.menuList)

      // 动态绑定路由
      let newRoutes = router.options.routes[0];

      console.log('res.data.data.nav: ', res.data.data);
      res.data.data.forEach(menu => {
        if (menu.children) {
          menu.children.forEach(e => {

            // 转成路由
            let route = menuToRoute(e)

            // 把路由添加到路由管理中
            if (route) {
              newRoutes.children.push(route)
            }
          })
        }
      })
      // 添加路由，会自动覆盖掉重复的部分（在这里是将第一个路由换掉）
      router.addRoute(newRoutes)
      hasRoute = true
      // 更改路由状态，设为true
      store.commit("changeRouteStatus", hasRoute)
    }).catch(err => {
      console.log('err: ', err);
      next({ path: '/login' })  // token过期，返回登录页
    })
  }
  next()  // 放行，进入想去的页面
})


// 导航转成路由
const menuToRoute = (menu) => {
  if (!menu.component) {
    return null
  }
  // 配置成路由正确的格式
  let route = {
    name: menu.name,
    path: menu.path,
    meta: {
      icon: menu.icon,
      title: menu.title
    }
  }
  route.component = () => import('@/views/' + menu.component + '.vue')

  return route
}


export default router
